<!-- vue-zhu/src/login/components/sign_up.vue -->
<template>
    <div class="form-section">
      <h2>注册账号</h2>
      <div class="input-container">
        <span class="for-icon">
          <i class="fas fa-user"></i>
        </span>
        <input type="text" class="input-field" placeholder="用户名" v-model="username">
      </div>
      <div class="input-container">
        <span class="for-icon">
          <i class="fas fa-envelope"></i>
        </span>
        <input type="email" class="input-field" placeholder="邮箱" v-model="email">
      </div>
      <div class="input-container">
        <span class="for-icon">
          <i class="fas fa-lock"></i>
        </span>
        <input type="password" class="input-field" placeholder="密码" v-model="password">
      </div>
      <div class="input-container">
        <span class="for-icon">
          <i class="fas fa-mobile-alt"></i> <!-- 更改为手机图标 -->
        </span>
        <input type="tel" class="input-field" placeholder="手机号" v-model="phone">
        <!-- 添加验证码按钮 -->
        <button class="verify-button" @click="getVerificationCode" :disabled="isCountingDown">
          {{ isCountingDown ? countdown + 's' : '获取验证码' }}
        </button>
      </div>
      <!-- 添加用户类型选择 -->
      <div class="input-container">
        <!-- <label for="type-select">用户类型:</label> -->
        <span class="for-icon">
          <i class="fas fa-user-tag"></i>
        </span>
        <select id="type-select" v-model="userType" class="input-field">
          <option value="" disabled selected>用户类型</option>
          <option value="卖家">卖家</option>
          <option value="买家">买家</option>
          <option value="管理员">管理员</option>
        </select>
      </div>
      <button class="register-button" @click="register">注册</button>
      <!-- 添加社交账号注册 -->
      <div class="social-register">
        <p>或通过社交账号注册</p>
        <div class="social-icons">
          <div class="social-icon">
            <i class="fab fa-qq"></i>
          </div>
          <div class="social-icon">
            <i class="fab fa-weixin"></i>
          </div>
          <div class="social-icon">
            <i class="fab fa-weibo"></i>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SignUp',
    data() {
      return {
        username: '',
        email: '',
        password: '',
        phone: '',
        userType: '未选择', // 添加用户类型
        isCountingDown: false, // 倒计时状态
        countdown: 60 // 倒计时时间
      }
    },
    methods: {
      register() {
        console.log('注册信息:', {
          username: this.username,
          email: this.email,
          password: this.password,
          phone: this.phone,
          userType: this.userType // 输出用户类型
        });
        // 将注册信息存储到 localStorage
        const userInfo = {
          username: this.username,
          email: this.email,
          password: this.password,
          phone: this.phone,
          userType: this.userType // 存储用户类型
        };
        localStorage.setItem('userInfo', JSON.stringify(userInfo));
        localStorage.setItem('loggedInUserType', this.userType); // 存储用户类型到单独的键
        alert('注册成功！');
      }
    },
    getVerificationCode() {
      if (this.isCountingDown) return;
      this.isCountingDown = true;
      this.countdown = 60;
      const interval = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          this.isCountingDown = false;
          clearInterval(interval);
        }
      }, 1000);
    }
  }
  </script>
  
  <style scoped>
  @import '@/assets/css/login.css';
  
  /* 添加验证码按钮样式 */
  .verify-button {
    margin-left: 10px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #4a90e2;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .verify-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  </style>